<template>
  <div>
    <el-row>
      <el-col :span="9" style="margin-right: 6px">
        <el-card shadow='never' style="height: 400px">
          <span slot="header">
            <span style="font-weight: bold">导入功能展示</span>
            <table-change @change="tableSize = $event" style="float: right;"/>
            <el-button @click="doExcel" type="primary" size="mini" style="float: right;margin-right: 10px">
              <svg-icon style="margin-right: 3px;" icon-class="import"/>
              导出excel
            </el-button>
            <el-upload
                style="display: inline;float: right;margin-right: 20px"
                action="/api/common/upload"
                :on-success="onUploadSuccess"
                :on-error="onUploadError"
                :on-progress = 'onProgress'
                :show-file-list='false'>
            <el-button type="primary" size="mini">
              <svg-icon style="margin-right: 3px;" icon-class="import"/>
              导入单文件
            </el-button>
          </el-upload>
            <el-upload
                style="display: inline;float: right;margin-right: 20px"
                multiple
                action="/api/common/uploads"
                :on-success="onUploadSuccess"
                :on-error="onUploadError"
                :on-progress = 'onProgress'
                :show-file-list='false'>
            <el-button type="primary" size="mini">
              <svg-icon style="margin-right: 3px;" icon-class="import"/>
              导入多文件
            </el-button>
          </el-upload>

          </span>
          <el-table
              ref="table"
              :size="tableSize"
              :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
              :data="tableData"
              row-key="id"
              :height="300"
              style="margin-top: -20px"
              highlight-current-row>
            <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50">
            </el-table-column>
            <el-table-column
                prop="originalFileName"
                height="25"
                label="文件名称">
            </el-table-column>
            <el-table-column
                prop="createTime"
                height="25"
                label="上传时间">
            </el-table-column>
            <el-table-column
                prop="address"
                align="center"
                width="150"
                label="操作">
              <template v-slot="{row}">
                <el-link style="margin-left: 5px" type="primary" @click="doUploadFilesDownload(row)">下载</el-link>
                <span style="margin-left: 5px;color:#CCCCCC">|</span>
                <el-link style="margin-left: 5px" type="danger" @click="doDeleteUploadFile(row)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              style="margin-top: 20px;float: right"
              small
              background
              @current-change='pageChange'
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total,prev, pager, next,jumper"
              :total="total">
          </el-pagination>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin-left: 6px">
        <el-card shadow='never' style="height: 400px">
          <span slot="header">
            <span style="font-weight: bold">下载功能展示</span>
            <table-change @change="tableSize = $event" style="float: right;"/>
          </span>
          <el-table
              :size="tableSize"
              :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
              :data="tableData1"
              row-key="id"
              :height="300"
              style="margin-top: -20px"
              highlight-current-row>
            <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50">
            </el-table-column>
            <el-table-column
                prop="name"
                height="25"
                label="文件名称">
            </el-table-column>
            <el-table-column
                prop="address"
                align="center"
                width="150"
                label="操作">
              <template v-slot="{row}">
                <el-link style="margin-left: 5px" type="primary" @click="doFilesDownload(row)">下载</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import axios from 'axios'; // 引入axios
export default {
  name: "demo3",
  data() {
    return {
      tableSize: '',
      tableData: [],
      tableData1:[],
      currentPage:1,
      pageSize:10,
      total:0
    }
  },
  methods: {
    doExcel(){
      this.$http({
        url:'/api/file/export',
        method:'post',
        responseType: 'blob',
      }).then(res=>{
        this.$download(res,`文件列表`)
      })
    },
    doFilesDownload(row){
      this.$http({
        url:'/api/common/download',
        method:'get',
        responseType: 'blob',
        params:{fileName:row.name,path:'a'}
      }).then(res=>{
        this.$download(res,row.name)
      })
    },
    doUploadFilesDownload(row){
       const {url,originalFileName} = row
      this.$http({
        url,
        method:'get',
        responseType: 'blob',
      }).then(res=>{
        this.$download(res,originalFileName)
      })
    },
    doDeleteUploadFile(row){
      this.$confirm(`您确认删除当前文件吗?<div><span style="font-size: 10px">您已选择1条内容</span></div>`, '', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        this.$http.post('/api/file/deleteFile',row).then(_=>{
          this.getAllUploadFiles()
          this.$message({
            duration:10000,
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
      });
    },
    pageChange(page){
      this.currentPage = page
      this.getAllUploadFiles()
    },
    getAllUploadFiles(interval=false) {
      const {currentPage,pageSize} = this
      const params = {currentPage,pageSize}
      this.$http.getWithPage('/api/file/getUploadFilesByPage',params,interval).then(res => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    onProgress(res,file){
    },
    onUploadSuccess(res,file) {
      if(res.code==500){
        this.$message.error(res.msg)
      }else{
        this.getAllUploadFiles()
        this.$message.success('上传成功！')
      }

    },
    onUploadError(res,file) {
      this.$message.error('上传失败！')
    },
    listDownloadFiles(){
      this.$http.get('/api/file/doListDownloadFiles',{path:'a'}).then(res => {
        res.forEach(name=>{
          const file = {name}
          this.tableData1.push(file)
        })
      })
    },
  },
  created() {
    this.getAllUploadFiles()
    this.listDownloadFiles()
  }
}
</script>

<style scoped>
</style>
